<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<style type="text/css">
		@font-face {
			font-family: 'iconfont';
			src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot');
			src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot?#iefix') format('embedded-opentype'), url('${pageContext.request.contextPath}/static/css/font/iconfont.woff2') format('woff2'), url('${pageContext.request.contextPath}/static/css/font/iconfont.woff') format('woff'), url('${pageContext.request.contextPath}/static/css/font/iconfont.ttf') format('truetype'), url('${pageContext.request.contextPath}/static/css/font/iconfont.svg#iconfont') format('svg');
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	</style>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/Payment-cart.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.1.0.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/Payment-cart.js"></script>
</head>

<body>
<!--顶部-->
<div class="layout-header clearfix layout-header-order login" id="layoutHeader">
	<div class="mzcontainer">
		<!--魅族商标-->
		<div class="layout-header-logo">
			<a class="layout-header-logo-link" target="_blank" href="index.jsp">
				<img src="${pageContext.request.contextPath}/static/img/1.png" style="max-width:125px;margin-top:28px;" />
			</a>
		</div>
		<ul class="layout-header-bread">
			<li class="layout-header-bread-block ">
				购物车
			</li>
			<li class="layout-header-bread-block active">
				确认订单
			</li>
			<li class="layout-header-bread-block ">
				在线支付
			</li>
			<li class="layout-header-bread-block ">
				完成
			</li>
		</ul>
		<ul class="layout-header-right">
			<li class="layout-header-right-item">
				<a class="layout-header-right-link" target="_blank">
					我的订单
				</a>
				<script>
					$(function () {
						$(".layout-header-right-link").click(function () {
							location.href = "myOrder";

						});

					});
				</script>
			</li>
			<li class="layout-header-right-item signout">
				<a class="layout-header-right-link">
					登录
				</a>
			</li>
			<li class="layout-header-right-item signout">
				<a class="layout-header-right-link" target="_blank">
					注册
				</a>
			</li>
			<li class="layout-member signin">
				<a class="layout-member-link" target="_blank">
					<span class="layout-member-username" id="topbarUser">${sessionScope.user.username}</span> 的商城
					<i class="layout-member-triangle"></i>
				</a>
				<ul class="layout-member-downmenu">
					<li class="layout-member-downmenu-item">
						<a class="layout-member-downmenu-link" target="_blank">
							地址管理
						</a>
					</li>
					<li class="layout-member-downmenu-item">
						<a class="layout-member-downmenu-link" target="_blank">
							我的收藏
						</a>
					</li>
					<li class="layout-member-downmenu-item" target="_blank">
						<a class="layout-member-downmenu-link" target="_blank">
							我的回购金
						</a>

					</li>
					<li class="layout-member-downmenu-item" target="_blank">
						<a class="layout-member-downmenu-link" target="_blank">
							问题反馈
						</a>
					</li>
					<li class="layout-member-downmenu-item" target="_blank">
						<a class="layout-member-downmenu-link" target="_blank">
							退出
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<!--中部样式-->
<div class="cart" id="cart">
	<div class="mzcontainer">
		<table class="cart-header">
			<tbody>
			<tr>
				<td class="cart-col-select">
					<div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all" data-bh="click_store_cart_all">
						<div class="mz-checkbox box">
						</div> <span class="cart-select-title">全选</span>
					</div>
				</td>
				<td class="cart-col-price">
					单价(元)
				</td>
				<td class="cart-col-number">
					数量
				</td>
				<td class="cart-col-total">
					小计(元)
				</td>
				<td class="cart-col-ctrl" id="J-cartHearCtrl">
					编辑
				</td>
				<td class="cart-col-ctrl" id="successoff">
					完成
				</td>
			</tr>
			</tbody>
		</table>
		<!--商品选择-->
		<ul class="cart-merchant-list" id="merchantList">
			<li class="cart-merchant">
				<div class="cart-merchant-header">
					<div class="cart-select-all">
						<div class="mz-checkbox box"></div>
						<span class="cart-select-title">魅族</span>
					</div>
					<div class="cart-select-fee unFreeShipping" id="cartSelectFee">
						<div>
							<p>已免运费</p>
							<span class="fee-shipping-skip" data-mtype="store_cart_postage">
										立即凑单 >
									</span>
						</div>
					</div>
				</div>
				<!--商品-->
				<table class="cart-merchant-body">
					<!--加购价-->
					<tr class="cart-more-buy">
						<td class="cart-product-buy" colspan="5">
							<div class="more-buy-tag">
								<span>加价购</span>
							</div>
							<span class="more-buy-tips">另加19元起，即可换购超值商品</span>
							<span class="more-buy-skip" data-mdesc="换购超值商品">
										立即加购 >
									</span>
						</td>
					</tr>
					<!--商品结算-->
					<c:forEach items="${sessionScope.carts}" var="cart">
						<c:set var="pri" value="${pri+(cart.checked==1?cart.sum:0)}"/>
					<tr class="cart-product hasTheBinder">
						<td class="cart-col-select">
							<div class="mz-checkbox box-${cart.cartnumber} ${cart.checked==1?"checked":null}" id="box-${cart.cartnumber}"></div>
							<a class="cart-product-link" target="_blank" data-mdesc="购物车商品位">
								<img src="${pageContext.request.contextPath}/static/img/cg.png" class="cart-product-img" alt="${cart.pname}" style="display: inline;" />
							</a>
							<a class="cart-product-link cart-product-info" target="_blank" data-mdesc="购物车商品位">
								<p class="cart-product-item-name">${cart.pname}</p>
								<p class="cart-product-desc">${cart.online == 0 ? "全网通公开版" : cart.online == 1 ? "移动" : cart.online == 2 ? "联通" : "电信"} ${cart.color} ${cart.rsize}+${cart.msize}GB</p>
							</a>
						</td>
						<td class="cart-col-price">
							<p>
										<span class="cart-product-price" id="price${cart.cartnumber}">
											${cart.price}
										</span>
							</p>
						</td>
						<td class="cart-col-number">
							<div class="cart-product-number-adder">
								<p class="cart-product-number-max show">
									限购1件
								</p>
								<div class="mz-adder">
									<button class="mz-adder-subtract" cartnumber="${cart.cartnumber}"></button>
									<div class="mz-adder-num">
										<input type="text" class="mz-adder-input" id="count${cart.cartnumber}" value="${cart.count}" />
									</div>
									<button class="mz-adder-add" cartnumber="${cart.cartnumber}"></button>
									<%--<script>
										$(function () {
											$(".mz-adder-subtract").click(function () {
												var count = $(".mz-adder-input").val();
											});
											function upCart(count) {
												$.ajax({
													url: "/upcart",
													type: "post",
													data: {
														count: count
													}
												});
											}
										});
									</script>--%>
								</div>
							</div>
						</td>
						<td class="cart-col-total">
							<span class="cart-product-price total main-goods" id="sum${cart.cartnumber}">${cart.sum}</span>
						</td>
						<td class="cart-col-ctrl">
							<!--没有删除-->
							<div class="cart-product-remove right-show" id="cart-product" data-mdesc="删除单个商品按钮"></div>
							<!--删除-->
							<div class="cart-product-remove let-show iconfont" id="cart-remove" data-mdesc="删除单个商品按钮">&#xe639;</div>
						</td>
					</tr>
					</c:forEach>
				</table>
			</li>
		</ul>
	</div>
	<!--全选-->
	<div class="cart-footer" id="cartFooter">
		<div class="mzcontainer">
			<div class="cart-footer-left">
				<div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all" data-bh="click_store_cart_all">
					<div class="mz-checkbox box"></div>
					<span class="cart-select-title">全选</span>
				</div>
				<span class="cart-remove-selected" data-mdesc="删除选中商品" data-mtype="store_cart_batch" id="removeSelected">删除选中的商品
						</span>
				<span class="cart-footer-count">
							共
							<span class="cart-footer-num" id="totalCount">${sessionScope.carts.size()}</span> 件商品， 已选择
						<span class="cart-footer-num blue" id="totalSelectedCount">0</span> 件
						</span>
			</div>
			<div class="cart-footer-right">
						<span class="cart-footer-sum">
							已优惠
							<span class="cart-footer-num red" id="totalDiscount" >0.00</span> 元， 合计(不含运费)：
						<span class="cart-footer-total" id="totalPrice">${pri}</span>
						</span>
				<div class="mz-btn success to-order-btn" id="cartSubmit" data-mdesc="去结算按钮" data-mtype="store_cart_checkout" data-bh="click_store_cart_checkout">
					去结算
				</div>
				<script>
					$(function () {
						$("#cartSubmit").click(function () {
							var c = $(".checked").length;
							if (c > 0) {
								location.href = "/Payment-page";
							}
						});
					});
				</script>
			</div>
		</div>
	</div>
</div>
<!--底部 -->
<div class="meizu-footer">
	<div class="meizu-footer-link">
		<!--底部服务项目-->
		<div class="meizu-row">
			<ul class="meizu-footer-service">
				<li>
					<a>
						<img src="${pageContext.request.contextPath}/static/img/meizu49.png" />
						<span>满80免运费</span>
					</a>
				</li>
				<li>
					<a>
						<img src="${pageContext.request.contextPath}/static/img/meizu50.png" />
						<span>100+ 城市次日送达</span>
					</a>
				</li>
				<li>
					<a>
						<img src="${pageContext.request.contextPath}/static/img/meizu51.png" />
						<span>7天无理由退货</span>
					</a>
				</li>
				<li>
					<a>
						<img src="${pageContext.request.contextPath}/static/img/meizu52.png" />
						<span>15天换货保障</span>
					</a>
				</li>
				<li>
					<a>
						<img src="${pageContext.request.contextPath}/static/img/meizu53.png" />
						<span>1年免费保修</span>
					</a>
				</li>
				<li>
					<a>
						<img src="${pageContext.request.contextPath}/static/img/meizu54.png" />
						<span>上门快修</span>
					</a>
				</li>
			</ul>
			<div class="onlive-server">
				<span>周一至周日 7:30-24:00</span>
				<p class="tel">400-788-3333</p>
				<a class="onlive-btn">在线客服</a>
			</div>
		</div>
		<!--服务项目划线-->
		<hr class="foot-hr" />
		<!--底部了解详情-->
		<div class="meizu-footer-co">
			<div class="meizu-row-row">
				<div class="meizu-footer-info">
					<div class="meizu-footer-info-left">
						<ul class="clearfix">
							<li>
								<a><span>了解魅族</span></a>
							</li>
							<li>
								<a><span>加入我们</span></a>
							</li>
							<li>
								<a><span>联系我们</span></a>
							</li>
							<li>
								<a><span>Flyme</span></a>
							</li>
							<li>
								<a><span>魅族社区</span></a>
							</li>
							<li>
								<a><span>天猫旗舰店</span></a>
							</li>
							<li>
								<a><span>问题反馈</span></a>
							</li>
							<li>
								<a><span>线上销售授权名单公示</span></a>
							</li>
							<li>
								<a><span>出版物经营许可证证</span></a>
							</li>
							<li>
								<a><span>简体中文</span></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="meizu-footer-certificate">
			©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
			<a>粤ICP备13003602号</a>
			<a>合字B2-20170010</a>
			<a>营业执照</a>
			<a>法律声明</a>
			<span>粤公网安备 44049102496009号</span>
			<a></a>
			<a></a>
			<a></a>
		</div>
		<div class="ii-subscribe">
			<a><img src="${pageContext.request.contextPath}/static/img/meizu115.png" /></a>
			<span class="li-hr"></span>
			<a><img src="${pageContext.request.contextPath}/static/img/meizu116.png"></a>
			<span class="li-hr"></span>
			<a><img src="${pageContext.request.contextPath}/static/img/meizu117.png"></a>
		</div>
	</div>
</div>

<!--删除弹窗-->
<div class="mz-mask" style="display: none;">
	<div class="mz-dialog dialog ">
		<div class="mz-dialog-header">
			<div class="mz-dialog-title">删除</div>
			<div class="mz-dialog-close"></div>
		</div>
		<div class="mz-dialog-main">
			<div class="mz-dialog-warp">
				<div class="mz-dialog-content">
					您确定要删除该商品吗？
				</div>
			</div>
		</div>
		<div class="mz-dialog-bottom">
			<div class="mz-btn cancel">删除</div>
			<div class="mz-btn success">取消</div>
		</div>
	</div>
</div>
</body>

</html>